<template>
	<view>
		
		<view class="haveResult" >
			<uni-section>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content" >
					<view v-if="current === 0" >
						<!-- 有结果现实的内容 -->
						<navigator url="/pages/courseDetail/courseDetail" v-if="data1[0]">
						  <view class="text1" v-for="v in data1" :key="v.id">
							  <view class="informationL">
							    <image
							      :src="v.url"
							    ></image>
							  </view>
							  <view class="informationR">
							    <text class="name">{{v.coursename}}</text>
							    <view class="rButton">
							      <view class="rbL">
							        <text class="iconfont icon-qian"></text>
							        <text>{{v.courseprice}}</text>
							      </view>
							      <view class="rbR">323人正在学</view>
							    </view>
							  </view>
						  </view>
						</navigator>
						<!-- 没有结果现实的内容 -->
						<view class="text" v-else>
							<image src="../../static/images/搜索背景图.png"></image>
							<view>没有找到相关的内容，请换个关键字试试吧~</view>
						</view>
					</view>
					<view v-if="current === 1" >
						<!-- 有结果现实的内容 -->
						<navigator v-if="data2[0]">
							<view class="text2" v-for="a in data2" :key="a.id" @click="two(a.id)">
								<view class="title">
									<text>{{a.articleTitle}}</text>
								</view>
								<view class="smallTitle">
									<text>{{a.text}}</text>
								</view>
								<image :src="a.coverUrl"></image>
								<view class="bottom">
									<view class="bottomL">
										<text>{{a.likeNum}}赞</text>
										<text>{{a.collectNum}}收藏</text>
									</view>
									<view class="bottomR">{{a.uploadTime}}</view>
								</view>
							</view>
						</navigator>
						<!-- 没有结果现实的内容 -->
						<view class="text" v-else>
							<image src="../../static/images/搜索背景图.png"></image>
							<view>没有找到相关的内容，请换个关键字试试吧~</view>
						</view>
					</view>
					<view v-if="current === 2">
						<!-- 有结果现实的内容 -->
						<navigator v-if="data3[0]">
							<ActivityModule :data3='data3[0]'></ActivityModule>
						</navigator>
						<!-- 没有结果现实的内容 -->
						<view class="text" >
							<image src="../../static/images/搜索背景图.png"></image>
							<view>没有找到相关的内容，请换个关键字试试吧~</view>
						</view>
					</view>
				</view>
			</uni-section>
		</view>
		<BottomText></BottomText>
	</view>
</template>

<script setup>
	import http from '@/utils/http.js';
	import ActivityModule from '@/components/ActivityModule/ActivityModule.vue'
	import BottomText from '@/components/BottomText/BottomText.vue';
	import {ref,computed,onMounted,defineProps,reactive,defineExpose} from 'vue';
	 import {onLoad} from "@dcloudio/uni-app"
	
	const name="search2";
	const items=['热门课程', '教育头条', '非翔活动']
	const styles= [{
						value: 'text',
						text: '文字'
					}];
	let current=ref(0);
	const activeColor='#333333';
	const styleType='text';
	//接受
	const {data1,data2,data3}= defineProps(['data1','data2','data3'])
	// const {data2}= defineProps(['data2'])
	let headData=ref([]);
	const onClickItem=function(e) {
			// console.log(data1,data2,data3,111)
							if (current.value !== e.currentIndex) {
								current.value = e.currentIndex
							}
						}
	const two=function(id){
		uni.navigateTo({
			url:`/pages/Article-Details/Article-Details?id=${id}`
		})
	}
	
	
</script>

<style lang="less" scoped> 
@import url('../../static/iconfont-J/iconfont.css');
.example-body {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			padding: 0;
	}
	
	.uni-common-mt {
	font-weight: 700;
	}
	
	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}
	// .segmented-control__text.data-v-064e9cd1{
	// 	font-size: 30rpx;
		
	// }
	
	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		.text{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 586rpx;
			font-size: 26rpx;
			color: #9a9999;
			padding-top: 164rpx;
			image{
				height: 154rpx;
				width: 294rpx;
				margin-bottom: 54rpx;
			}
		}
		.text1 {
		  margin: 58rpx 40rpx;
		  height: 156rpx;
		  display: flex;
		  .informationL {
		    width: 288rpx;
		    height: 156rpx;
		    border-radius: 5px;
		    display: flex;
		    justify-content: space-between;
		    image {
		      width: 290rpx;
		      height: 158rpx;
		    }
		  }
		  .informationR {
		    margin-left: 30rpx;
		    margin-top: 34rpx;
			.name{
				font-size: 30rpx;
			}
		    .rButton {
		      width: 354rpx;
		      display: flex;
		      justify-content: space-between;
		      margin-top: 24rpx;
		      .rbL {
		        font-size: 20rpx;
		        line-height: 28rpx;
		        color: #efb235;
		        .iconfont {
		          width: 28rpx;
		          height: 28rpx;
		          color: #efb235;
		          vertical-align: middle;
		          margin-right: 14rpx;
		        }
		      }
		      .rbR {
		        font-size: 22rpx;
		        line-height: 28rpx;
		        color: #919291;
		      }
		    }
		  }
		}
		.text2{
			padding: 26rpx 20rpx;
			margin: 60rpx 38rpx;
			width: 636rpx;
			height: 526rpx;
			// position: absolute;
			// left: 0;
			// top: 120px;
			box-shadow: 0 0 10rpx #F2F2F2;
			.title{
				font-size: 30rpx;
				font-weight: 700;
				margin-bottom: 32rpx;
			}
			.smallTitle{
				// width: 588rpx;
				// height: 78rpx;
				font-size: 22rpx;
				color: #c6c5c5;
				margin-bottom: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 文本不换行 */
				white-space: nowrap;
			}
			image{
				    width: 630rpx;
				    height: 316rpx;
					margin-bottom: 14rpx;
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				line-height: 24rpx;
				width: 644rpx;
				height: 24rpx;
				color: #cccbcb;
				margin-bottom: 42rpx;
			}
		}
		
	}
	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
</style>